<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title> 期刊文献库 </title>
  <link rel="stylesheet" type="text/css" href="/css/style.css" />

  <style type="text/css">
    *, body {
      margin: 0px;
      font-family: '微软雅黑',serif;
    }
    .button-container {
      float: right;
    }
  </style>
  <script src="/js/jquery-1.10.2.min.js"></script>
  <script src="/js/generic.js"></script>
  <script src="/js/fypage.js"></script>
</head>

<body>
<table class="maintable"style="width:100%">
  <tr>
    <td class="rightmaintd" valign="top">
      <div style="height:40px;text-align:center;background-color:#009966">
        <p style="font-weight:bold;padding-top:10px;font-size:larger;color:white">期刊文献库</p>
      </div>
      <div class="searchdiv">
        <input type="button" id="btnAdd"  value="+添加医案" class="xinzengbtn" onclick="create()">
        <input type="button" value="+批量添加" class="xinzengbtn" onclick="window.location.href='/qikan/batchAdd'">
        <input type="button" value="导出当前表格数据" class="chaxunbtn" onclick="table2Excel('期刊文献信息')" style="float:right; width: 150px" />
      </div>
      <div class="searchdiv">
        <label>医案编号：<input type="text"  id="searchBh" onkeypress="enterKeyPress(event)"></label>
        <label>期刊名：<input type="text" style="width:8%" id="searchQk" onkeypress="enterKeyPress(event)"></label>
        <label>文章名：<input type="text"  id="searchWz" onkeypress="enterKeyPress(event)"></label>
        <label>文章作者：<input type="text"  style="width:8%" id="searchZz" onkeypress="enterKeyPress(event)"></label>
        <label>患者姓名：<input type="text"  style="width:8%" id="searchHz" onkeypress="enterKeyPress(event)"></label>
        <select id="shenhe" onchange="search()">
          <option value="" selected>所有</option>
          <option value="保存">保存</option>
          <option value="一审">一审</option>
          <option value="通过">通过</option>
        </select>
        <!--        <div class="rightsearchdiv">&lt;!&ndash; name &ndash;&gt;-->
        <!--          <div class="rightsearchdivtext">-->

        <!--            <input type="text" id="keyword1" class="nobodertext" placeholder=" 输入中药名查询" onkeypress="enterKeyPress(event)">-->
        <button class="searchbtn" onclick="search()" >
          <img src="/images/fdj.png" alt="" class="searchfdj">
        </button>
        <!--          </div>-->
        <!--        </div>-->
      </div>


      <table class="neirontbiao" id="tbl_list" style="width:100%">
        <tr>

        </tr>
        <table class="neirontbiao" id="add" style="width: 100%"></table>

      </table>
      <div class="button-container">
        <button id="prevButton">上一页</button>
        <button id="nextButton">下一页</button>
      </div>
      每页显示条数：
      <select id="pageSizeSelect" onchange="changePageSize();">
        <option value="10">10</option>
        <option value="25">25</option>
        <option value="50">50</option>
        <option value="100" selected>100</option>
        <option value="200">200</option>
      </select>
      <div class="pagediv" id="pager">
        <label>第
          <input type="text" id="page" width="5px" onkeypress="pageSearch(event)">
          页
        </label>
        <input type="button" value="跳转" onclick="pageOn()">
        <p id="sumPageId">place</p>
      </div>

    </td>
  </tr>
</table>
<p class="shownone" id="Userrole" th:text="${roleType}"></p>
<!--userid用户类型-->

</body>
</html>
<script>
  var role;
  var roleCheck = true;
  usercheckFun();
  function usercheckFun(){
    role = document.getElementById('Userrole').textContent;
    if(role=='二级审核'||role=='教师审核'||role=='名医专家'||role=='学生'||role=='输入者'){
      roleCheck = false;
    }
  }
  function start(){
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/qikan/', true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        dataSource = JSON.parse(xhr.responseText);
        dataSource.forEach(function(obj) {
          for (var key in obj) {
            if (obj.hasOwnProperty(key) && obj[key] === null) {
              obj[key] = ''; // 将属性值为 null 的属性替换为空字符串
            }
          }
        });
        data = JSON.parse(JSON.stringify(dataSource));
        renderData();
      }
    };
    xhr.send();
  }
  var bh = document.getElementById('searchBh');
  var qk = document.getElementById('searchQk');
  var wz= document.getElementById('searchWz');
  var zz = document.getElementById('searchZz');
  var hz = document.getElementById('searchHz');
  var shenhe = document.getElementById('shenhe');
  var pageChage=document.getElementById('page');
  var sumPageShow=document.getElementById('sumPageId');
  var pageSize = 50; // 每页显示的数据量
  var currentPage = 1; // 当前页码
  var dataRender=[];  //每页显示的数据，是数据
  var pageSum=0;  //总共的页数
  var dataSource=[];   //一共有的json数据，源数据
  var data=[];  // 操作的数据，防止错误，可以由源数据赋值

  // 使用AJAX请求获取JSON数据
  start();
  function renderData(){    //渲染页面函数
    pageSum=Math.ceil(data.length/(pageSize));
    dataRender=data.slice((currentPage-1)*pageSize,pageSize*currentPage);
    var container = document.getElementById('tbl_list');
    var html = '<tr class="neirontbiaotou"><th class="shownone">医案编号</th><th width="10%">患者姓名</th><th width="5%">性别</th><th width="12%" class="noExl">就诊时间</th><th width="10%">文章作者</th><th width="10%">文章名</th><th width="10%">期刊名</th><th width="5%">发表年份</th><th width="5%">卷</th><th width="5%">期</th><th width="5%">页</th><th width="8%">初始录入人</th><th with="10%">状态</th><th class="noExl">操作</th>' +
            '<th class="shownone">就诊日期：年</th><th class="shownone">月</th><th class="shownone">日</th><th class="shownone">舌脉总体情况</th><th class="shownone">现病史</th></tr>';
    if (dataRender.length == 0) {
      html += '<tr><td colspan="7" style="text-align:center;height:50px;">暂无期刊信息</td></tr>';
    }
    for (var i = 0; i < dataRender.length; i++) {
      var item = dataRender[i];
      html += '<tr>';
      html += '<td class="shownone">' + item.biaohao + '</td>';
      html += '<td>' + item.xingming + '</td>';
      html += '<td>' + item.xingbie + '</td>';
      // html += '<td>' + item.nianling + '</td>';
      html += '<td class="noExl">' + formDate1(item.year,item.month,item.day) + '</td>';
      html += '<td>' + item.wenzhangzuozhe + '</td>';
      html += '<td>' + item.wenzhangming + '</td>';
      html += '<td>' + item.qikanming + '</td>';
      html += '<td >' + item.fabiaonianfen + '</td>';
      html += '<td>' + item.juan + '</td>';
      html += '<td>' + item.qi + '</td>';
      html += '<td>' + item.ye + '</td>';
      // html += '<td>' + item.wangzhi + '</td>';
      html += '<td>' + item.createuser + '</td>';
      html += '<td>' + item.shenhe + '</td>';
      html += '<td class="shownone">' + item.year + '</td>';
      html += '<td class="shownone">' + item.month + '</td>';
      html += '<td class="shownone">' + item.day + '</td>';
      html += '<td class="shownone">' + item.shezhen + '</td>';
      html += '<td class="shownone">' + item.xianbingshi + '</td>';
      if(roleCheck||item.shenhe=='保存'){
        html += '<td class="noExl">' + '<a href="javascript:update(\'' + item.id + '\')">编辑</a>' ;
        html += '&nbsp;<a style=";color:#0c531f" href="javascript:deleteD(\'' + item.id + '\')">删除</a>';
      }
      else html += '<td class="noExl">' + '<a href="javascript:update(\'' + item.id + '\')">查看</a>' ;
      html += '</td></tr>'
    }
    pageChage.value=currentPage;
    sumPageShow.textContent="共 "+pageSum+" 页";
    container.innerHTML = html;
  }
  function formDate1(year,month,day) {
    if (year == '') {
      if (month == '') {
        if (day == '') return '';
        else return `${day}日`;
      } else {
        if (day == '') return `${month}月`;
        else return `${month}月${day}日`;
      }
    } else {
      if (month == '') {
        if (day == '') return `${year}年`;
        else return `${year}年${day}日`;
      } else {
        if (day == '') return `${year}年${month}月`;
        else return `${year}年${month}月${day}日`;
      }
    }
  }
    function nextOrPreOnClick(){
    //上一页
    var prevButton = document.getElementById('prevButton');
    prevButton.addEventListener('click', function() {
      currentPage--;
      if(currentPage==0)
        currentPage=pageSum;
      renderData();

    });

    // 下一页按钮点击事件处理函数
    var nextButton = document.getElementById('nextButton');
    nextButton.addEventListener('click', function() {
      currentPage=(++currentPage)%pageSum;
      currentPage=currentPage==0?pageSum:currentPage;
      renderData();
    });
  }
  function changePageSize(){
    var pageSizeSelect = document.getElementById('pageSizeSelect');
    pageSize = parseInt(pageSizeSelect.value);
    currentPage=1;
    renderData();
  }
  nextOrPreOnClick();
  function search() {
    currentPage = 1;
    data = [];
    var bhVal = bh.value.toUpperCase();
    var qkVal = qk.value.toUpperCase();
    var wzVal = wz.value.toUpperCase();
    var zzVal = zz.value.toUpperCase();
    var hzVal = hz.value.toUpperCase();
    var shenheVal = shenhe.value.toUpperCase();
    if (bhVal == ""&&qkVal==""&&wzVal==""&&zzVal==""&&hzVal==""&&shenheVal=="") {
      data = JSON.parse(JSON.stringify(dataSource));
    }
    else {
      for (var i = 0; i < dataSource.length; i++) {
        if (dataSource[i].biaohao.toUpperCase().includes(bhVal)  && dataSource[i].qikanming.toUpperCase().includes(qkVal)&& dataSource[i].wenzhangming.toUpperCase().includes(wzVal)&& dataSource[i].wenzhangzuozhe.toUpperCase().includes(zzVal)&& dataSource[i].xingming.toUpperCase().includes(hzVal)&& dataSource[i].shenhe.toUpperCase().includes(shenheVal) ) {
          data.push(dataSource[i]);
        }
      }
    }
    renderData();
  }
  function enterKeyPress(event) {
    // 检查按下的按键是否为回车键，回车键的keyCode是13
    if (event.keyCode === 13) {
      search();
    }
  }
  function create(){
    window.location.href="/qikan/create";
  }
  function update(userid){
    window.open("/qikan/edit/" + userid);
  }
  function deleteD(userid){
    var result=confirm("确认删除当前内容吗？");
    if(result){
      // 发送 DELETE 请求
      fetch('/qikan/'+userid, {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json' // 可根据实际情况设置请求头
        },
      })
              .then(response => {
                if (response.ok) {
                  alert("删除成功！");
                  start();
                  renderData();
                } else {
                  alert("发生错误，删除失败！");
                }
              })
              .catch(error => {
                // 捕获网络错误等异常
                alert("网络错误，删除失败！");
              });

    }
  }
  function pageSearch(event) {
    // 检查按下的按键是否为回车键，回车键的keyCode是13
    if (event.keyCode === 13) {
      pageOn();
    }
  }
  function pageOn(){
    var afterPage=pageChage.value;
    if(afterPage<1||afterPage>pageSum){
      alert("输入的页码错误！");
      return;
    }
    currentPage=afterPage;
    renderData();
  }
  function table2Excel(filename) {
    $("#tbl_list").table2excel({
      exclude: ".noExl",//class="noExl"的列不导出
      name: "Excel Document Name",
      filename: filename  + ".xlsx",//文件名称
      fileext: ".xlsx",//文件后缀名
      exclude_img: true,//导出图片
      exclude_links: true,//导出超链接
      exclude_inputs: true//导出输入框内容
    });
  }
</script>
<script src="/js/jquery.table2excel.js"></script>